CSS-фильтры нужны для создания различных эффектов для изображений, которые можно увидеть в браузере. На сегодняшний день у нас есть возможность показать вам всё, что связано с этими новыми фильтрами. Мы изучим некоторые из них.

Приступаем к работе

Фильтры, как правило, используются с изображениями  (хотя иногда они применяются  к видео). Мы будем использовать это  изображение для демонстрации работы фильтров. Для начала создадим HTML-файл, прикрепим изображение и начнём тестировать css-фильтры. Для того, чтобы лучше продемонстрировать работу фильтров, мы будем использовать в примере 2 изображения: оригинальное и обработанное при помощи фильтров.

! Обратите внимание: публичные версии браузеров ещё не поддерживают эти фильтры, они работают только в  Google Canary / скачайте этот браузер, чтобы иметь  возможность просмотреть демонстрации.

Фильтр hue-rotate (оттенки)

Вы любите играть с  настройками  Hue / Saturation  в Photoshop? Теперь это можно делать в браузере при помощи фильтра hue-rotate (он позволяет менять оттенок изображения)

img {

   -webkit-filter: hue-rotate(50deg);

}

Смотрите пример

Данный фильтр, использует значения в градусах (50 degree, сокращенно deg).  Подобно тому, как вы указываете цифровое значение hue в Фотошоп, задайте значение в градусах для этого фильтра, чтобы получить точно такой же эффект.

Вы можете создать  анимацию, которая позволит меняться эффектам по очереди, смотрите пример кода.

img {

   -webkit-animation: adjustHue 1s alternate infinite;

}

@-webkit-keyframes adjustHue {

   0% { -webkit-filter: hue-rotate(30deg); }

   50% { -webkit-filter: hue-rotate(60deg); }

   100% { -webkit-filter: hue-rotate(90deg); }

}

Фильтр grayscale (градации серого)

Раньше мы использовали различные хаки для того, чтобы изображение изменяло свой цвет от черно-белого к цветному в браузере. Один из методов предусматривает наложение одного изображения на другое.  Другим вариантом является использование canvas. Или ...  можно просто использовать grayscale-фильтр.

img {

   -webkit-filter: grayscale(100%);

}

Смотрите пример

При указании значений для grayscale-функции, просто решите для себя, насколько серым по шкале от 0 до 100% должно быть изображение.

Можно создать красивую анимацию при наведение курсора на картинку, используя CSS3-трансформацию (transition)

img {

  -webkit-transition: -webkit-filter 1s;

}

img:hover {

    -webkit-filter: grayscale(100%);

}

В будущем появятся  префиксы и для других браузеров, но сейчас мы их указывать не будем, так как они работают только в Webkit (пока).

Фильтр sepia (сепия)

Хотите сделать фотографию под старину? В этом вам поможет фильтр sepia.

img {

      -webkit-filter: sepia(100%);

}

Смотрите пример

Фильтр blur (размытость)

Указав радиус, мы можем легко сделать изображение размытым при просмотре  в браузере при помощи фильтра blur.

img {

      -webkit-filter: blur(2px);

}

Смотрите пример

Фильтр brightness (яркость)

При указании значений для этого фильтра, помните, что 100%-это значение яркости по умолчанию.  Чем ниже это значение, тем темнее получатся изображения.

И наоборот, чем выше это значение, тем светлее будет изображение. Мы использовали значение 15%.

img {

      -webkit-filter: brightness(15%);

}

Смотрите пример

Не забывайте: вы можете комбинировать несколько фильтров.

img {

      -webkit-filter: brightness(10%) sepia(100%);

}

Смотрите пример

Фильтр contrast (контраст)

При помощи этого фильтра можно  довольно легко регулировать значение контраста для  изображения.

img {

      -webkit-filter: contrast(200%);

}

Подобно предыдущему фильтру, 100% — это значение по умолчанию. Мы можем уменьшить или увеличить это значение, чтобы настроить контрастность изображения. Согласно спецификации,  значение 0% должно сделать изображение на 100% черным, однако оно  почему-то получается темно-серым.

img {

      -webkit-filter: contrast(0%);

}

Давайте создадим красивую анимацию.

img {

    -webkit-animation: bluePill 1s alternate infinite;

}

@-webkit-keyframes bluePill {

   0% { -webkit-filter: contrast(2000%); }

   100% { -webkit-filter: contrast(100%); }

}

Фильтр invert (негатив)

Указывайте значение от 0% до 100%, в зависимости от того, насколько вы хотите  инвертировать изображение.

img {

      -webkit-filter: invert(100%);

}

Смотрите пример

Заметим, что значение 0% оставит изображение без изменений.

Вы можете применить этот фильтр даже для всей страницы вашего сайта, однако лучше этого не делать, так как это создаст большую нагрузку на сайт и исчезнет прокрутка страницы.

Фильтр saturate (насыщенность)

Значение 0% фильтра saturate равносильно значению 100%  фильтра grayscale, оба эти значения полностью обесцветят изображение.

100%  для фильтра saturate — первоначальное значение, уменьшая его, мы сделаем изображение более насыщенным, и соответственно, увеличивая-более насыщенным.

img {

      -webkit-filter: saturate(50%);

}

Смотрите пример

Более подробно о фильтрах вы можете прочитать здесь.

По материалам net.tutsplus.com



Комментарии